<template>
     <div class="lately">
        <div v-for="i in list" :key="i.id">
            <p>{{i.beginTime}}-{{i.endTime}},{{i.roomSize}}间-{{i.person}}人</p>
            <div class="out">
                <img :src="i.pic"/>
                <div>{{i.hotelName}}</div>
                <div>{{i.address}}<span class="m-r"></span>{{i.distance}}km</div>
                <div class="star_remark">
                    <!-- <div>
                         <span class="iconfont icon-xingxing orange" v-for="j in Array.from(new Array(i.star).keys())" :key="j+'orange'"></span>
                         <span class="iconfont icon-xingxing gray" v-for="k in Array.from(new Array(5-i.star).keys())" :key="k+'gray'"></span>
                    </div> -->
                     <div class="star">
                         <span :class="['iconfont','icon-xingxing',j<i.star?'orange':'gray']" v-for="j in Array.from(new Array(5).keys())" :key="j"></span>
                    </div>
                    <div class="remark">{{i.remark}}条评论</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return {
            list:[]
        }
    },
    beforeCreate(){
        axios.get('/roome/lately').then(data=>this.list = data.data)
    }
}
</script>
<style scoped>
.out{
   height: 300px;
   width: 100%;
   border-radius: 5px;
   overflow: hidden;
}
.m-r{
    margin-right: 15px;
}
img{
    width: 100%;
}
.orange{
    color: orange;
}
.gray{
    color:#ccc;
}
.star_remark{
    overflow: hidden;
}
.star{
    float: left;
    margin-right: 15px;
}
.remark{
    float: left;
    color: #ccc;
}

</style>